<!DOCTYPE html>
<html lang="en">
<head>
    <% include ./public/meta.html %>
    <title>天籁之音</title>
</head>
<body>
    <header>
        <span class="return"><img src="../images/return.png" alt="" style="width:40%;"></span>
        <span>热门歌手</span>
        <span>
        <a href="/audio/search" style="display: block;">
            <img src="../images/search_all.png" alt="" style="width:60%;">
        </a>
        </span>
    </header>
       
    <%if(singers && singers.length > 0){%>
    <section>
        <ul id="j-singer">
            <% singers.forEach((item,index) => { %>
            <li>
                <div class="singer_img"><img src="<%=item.head%>" alt="<%=item.name%>"></div>
                <div class="singer_con">
                    <p><%=item.name%></p>
                    <p><img src="../images/arrow.png" alt=""></p>
                </div>
            </li>
            <% })%>
        </ul>
    </section>
    <% } %>
    <% if(singers.length == 20) {%>
    <p class="more see-more" data-page="1">加载更多</p>
    <% } %>
    <!--图标-->
    <p class="icon"><img src="../images/listen_icon.png" alt="" style="width:15%;"></p>
    <script id="goods-list-temp" type="text/html">
        {{each list as item i}}
        <li>
            <div class="singer_img"><img src="{{item.head}}" alt="{{item.name}}"></div>
            <div class="singer_con">
                <p>{{item.name}}</p>
                <p><img src="../images/arrow.png" alt=""></p>
            </div>
        </li>
        {{/each}}   
   </script>
</body>
</html>